<template>
    <div class="wrap">
        <ul class="list" v-if="suggests.length">
            <li class="list-item"
                v-for="item in suggests"
                :key="item.key"
                @click="handleSelect(item.value)"
            >
                <span class="suggest-item" v-html="item.name"></span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'SearchSuggest',
    emits: ['select'],
    props: {
        suggests: {
            type: Array
        }
    },
    setup(props, {emit}) {
        const handleSelect = item => {
            emit('select', item)
        }
        return {
            handleSelect
        }
    }
}
</script>
<style lang="scss">
  .suggest-item .suggest_high_light{
    color: $theme-color;
    font-style: normal;
  }
</style>
<style lang="scss" scoped>
  .wrap {
    background-color: $color-grey;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      transform: translate3d(0, 0, 0);
      background-color: $color-grey;
    }
    .list{
      padding-left: 10px;
      &-item{
        display: flex;
        align-items: center;
        height: 44px;
        @include border1px(#ccc, 0 0 1px);
        font-size: 14px;
        color: $color-text-regular;
        .fa{
          color: $color-text-secondary;
          margin-right: 5px;
        }
      }
    }
  }
</style>